<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import NewShopAuthService from '../services/NewShopAuthService.js'
import NewShopCartService from '../services/NewShopCartService.js'

const router = useRouter()
const cartItems = ref([])
const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

// 地址信息
const selectedAddressIndex = ref(0)
const addresses = ref([
  {
    id: 1,
    name: '张三',
    phone: '13800138000',
    province: '北京市',
    city: '北京市',
    district: '朝阳区',
    address: '建国路88号现代城5号楼1201室',
    isDefault: true
  },
  {
    id: 2,
    name: '张三',
    phone: '13800138000',
    province: '上海市',
    city: '上海市',
    district: '浦东新区',
    address: '陆家嘴环路1000号恒生银行大厦25楼',
    isDefault: false
  }
])

// 配送方式
const selectedShippingIndex = ref(0)
const shippingMethods = ref([
  { id: 1, name: '标准配送', fee: 0, estimatedTime: '1-3天送达' },
  { id: 2, name: '次日达', fee: 15, estimatedTime: '次日送达(今天16点前下单)' },
  { id: 3, name: '极速达', fee: 25, estimatedTime: '当日送达(今天10点前下单)' }
])

// 支付方式
const selectedPaymentIndex = ref(0)
const paymentMethods = ref([
  { id: 1, name: '支付宝', icon: 'alipay' },
  { id: 2, name: '微信支付', icon: 'wechat' },
  { id: 3, name: '银行卡', icon: 'bank' }
])

// 优惠券
const selectedCouponIndex = ref(0)
const coupons = ref([
  { id: 0, name: '不使用优惠券', discount: 0 },
  { id: 1, name: '满1000减100', discount: 100, minOrderAmount: 1000 },
  { id: 2, name: '满2000减200', discount: 200, minOrderAmount: 2000 },
  { id: 3, name: '首单立减50', discount: 50, isFirstOrder: true }
])

// 备注
const orderRemark = ref('')

// 检查登录状态
onMounted(() => {
  if (!NewShopAuthService.isLoggedIn()) {
    // 如果未登录，跳转到登录页面
    router.push('/new-shop-login')
    return
  }
  
  loadCartItems()
})

// 加载购物车商品
const loadCartItems = () => {
  isLoading.value = true
  errorMessage.value = ''
  
  try {
    // 模拟API调用延迟
    setTimeout(() => {
      const cart = NewShopCartService.getCart()
      if (cart.length === 0) {
        errorMessage.value = '购物车为空，请先添加商品'
        // 3秒后返回购物车页面
        setTimeout(() => {
          router.push('/new-shop/cart')
        }, 3000)
      } else {
        cartItems.value = cart
      }
      isLoading.value = false
    }, 300)
  } catch (error) {
    errorMessage.value = '加载购物车失败'
    console.error('加载购物车错误:', error)
    isLoading.value = false
  }
}

// 计算商品总价
const productTotalPrice = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0)
})

// 计算运费
const shippingFee = computed(() => {
  if (selectedShippingIndex.value >= 0 && selectedShippingIndex.value < shippingMethods.value.length) {
    return shippingMethods.value[selectedShippingIndex.value].fee
  }
  return 0
})

// 计算优惠券折扣
const couponDiscount = computed(() => {
  if (selectedCouponIndex.value >= 1 && selectedCouponIndex.value < coupons.value.length) {
    const coupon = coupons.value[selectedCouponIndex.value]
    // 检查优惠券使用条件
    if (coupon.minOrderAmount && productTotalPrice.value < coupon.minOrderAmount) {
      return 0
    }
    // 实际应用中应该检查是否为首单
    if (coupon.isFirstOrder) {
      return coupon.discount
    }
    return coupon.discount
  }
  return 0
})

// 计算应付总价
const totalAmount = computed(() => {
  return Math.max(0, productTotalPrice.value + shippingFee.value - couponDiscount.value)
})

// 提交订单
const submitOrder = async () => {
  if (cartItems.value.length === 0) {
    alert('购物车为空，请先添加商品')
    return
  }
  
  if (selectedAddressIndex.value < 0 || selectedAddressIndex.value >= addresses.value.length) {
    alert('请选择收货地址')
    return
  }
  
  try {
    isLoading.value = true
    
    // 模拟提交订单API调用
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 创建订单对象
    const order = {
      items: cartItems.value,
      address: addresses.value[selectedAddressIndex.value],
      shippingMethod: shippingMethods.value[selectedShippingIndex.value],
      paymentMethod: paymentMethods.value[selectedPaymentIndex.value],
      coupon: coupons.value[selectedCouponIndex.value],
      remark: orderRemark.value,
      productTotal: productTotalPrice.value,
      shippingFee: shippingFee.value,
      discount: couponDiscount.value,
      totalAmount: totalAmount.value,
      orderTime: new Date().toISOString()
    }
    
    console.log('提交订单:', order)
    
    // 清空购物车
    await NewShopCartService.clearCart()
    
    // 显示成功消息
    successMessage.value = '订单提交成功！即将跳转到支付页面'
    
    // 3秒后跳转到支付成功页面（模拟）
    setTimeout(() => {
      router.push('/new-shop/order-success')
    }, 3000)
  } catch (error) {
    console.error('提交订单失败:', error)
    alert('提交订单失败，请重试')
  } finally {
    isLoading.value = false
  }
}

// 返回购物车
const backToCart = () => {
  router.push('/new-shop/cart')
}

// 选择地址
const selectAddress = (index) => {
  selectedAddressIndex.value = index
}

// 选择配送方式
const selectShippingMethod = (index) => {
  selectedShippingIndex.value = index
}

// 选择支付方式
const selectPaymentMethod = (index) => {
  selectedPaymentIndex.value = index
}

// 选择优惠券
const selectCoupon = (index) => {
  selectedCouponIndex.value = index
}
</script>

<template>
  <div class="new-shop-checkout-container">
    <!-- 导航栏 -->
    <nav class="new-shop-nav">
      <div class="nav-logo">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="#2196F3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="9" cy="21" r="1"></circle>
          <circle cx="20" cy="21" r="1"></circle>
          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
        </svg>
        <span>NewShop</span>
      </div>
    </nav>
    
    <!-- 主要内容 -->
    <main class="new-shop-checkout-main">
      <div class="checkout-header">
        <h1>填写订单信息</h1>
        <!-- 结算步骤指示器 -->
        <div class="checkout-steps">
          <div class="step-item active">
            <div class="step-number">1</div>
            <div class="step-text">确认订单</div>
          </div>
          <div class="step-divider"></div>
          <div class="step-item">
            <div class="step-number">2</div>
            <div class="step-text">支付订单</div>
          </div>
          <div class="step-divider"></div>
          <div class="step-item">
            <div class="step-number">3</div>
            <div class="step-text">完成</div>
          </div>
        </div>
      </div>
      
      <div v-if="isLoading && !successMessage" class="loading-state">
        <div class="loading-spinner"></div>
        <p>处理中...</p>
      </div>
      
      <div v-else-if="errorMessage" class="error-state">
        <p>{{ errorMessage }}</p>
        <button class="retry-button" @click="backToCart">返回购物车</button>
      </div>
      
      <div v-else-if="successMessage" class="success-state">
        <div class="success-icon">
          <svg viewBox="0 0 24 24" width="64" height="64" stroke="#4caf50" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        </div>
        <h3>{{ successMessage }}</h3>
      </div>
      
      <div v-else class="checkout-content">
        <!-- 收货地址 -->
        <div class="checkout-section">
          <div class="section-header">
            <h2>收货信息</h2>
            <button class="add-address-button">新增地址</button>
          </div>
          
          <div class="address-list">
            <div 
              v-for="(address, index) in addresses" 
              :key="address.id"
              class="address-item"
              :class="{ 'selected': selectedAddressIndex === index }"
              @click="selectAddress(index)"
            >
              <div class="address-selector">
                <input 
                  type="radio" 
                  :name="'address'" 
                  :checked="selectedAddressIndex === index"
                  @change="selectAddress(index)"
                />
              </div>
              <div class="address-content">
                <div class="address-header">
                  <span class="address-name">{{ address.name }}</span>
                  <span class="address-phone">{{ address.phone }}</span>
                  <span v-if="address.isDefault" class="default-tag">默认</span>
                </div>
                <div class="address-detail">
                  {{ address.province }}{{ address.city }}{{ address.district }}{{ address.address }}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 配送方式 -->
        <div class="checkout-section">
          <div class="section-header">
            <h2>配送方式</h2>
          </div>
          
          <div class="shipping-methods">
            <div 
              v-for="(method, index) in shippingMethods" 
              :key="method.id"
              class="shipping-method-item"
              :class="{ 'selected': selectedShippingIndex === index }"
              @click="selectShippingMethod(index)"
            >
              <div class="shipping-selector">
                <input 
                  type="radio" 
                  :name="'shipping'" 
                  :checked="selectedShippingIndex === index"
                  @change="selectShippingMethod(index)"
                />
              </div>
              <div class="shipping-info">
                <span class="shipping-name">{{ method.name }}</span>
                <span class="shipping-time">{{ method.estimatedTime }}</span>
              </div>
              <div class="shipping-fee">
                {{ method.fee > 0 ? '¥' + method.fee : '免运费' }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 支付方式 -->
        <div class="checkout-section">
          <div class="section-header">
            <h2>支付方式</h2>
          </div>
          
          <div class="payment-methods">
            <div 
              v-for="(method, index) in paymentMethods" 
              :key="method.id"
              class="payment-method-item"
              :class="{ 'selected': selectedPaymentIndex === index }"
              @click="selectPaymentMethod(index)"
            >
              <div class="payment-selector">
                <input 
                  type="radio" 
                  :name="'payment'" 
                  :checked="selectedPaymentIndex === index"
                  @change="selectPaymentMethod(index)"
                />
              </div>
              <div class="payment-info">
                <div class="payment-icon">{{ method.icon }}</div>
                <span class="payment-name">{{ method.name }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 优惠券 -->
        <div class="checkout-section">
          <div class="section-header">
            <h2>优惠券</h2>
          </div>
          
          <div class="coupon-selector">
            <div class="coupon-info">
              <span>已选择：{{ coupons[selectedCouponIndex].name }}</span>
              <span v-if="couponDiscount > 0" class="coupon-discount">-¥{{ couponDiscount }}</span>
            </div>
            <div class="coupon-dropdown">
              <button class="coupon-button">选择优惠券</button>
              <div class="coupon-dropdown-content">
                <div 
                  v-for="(coupon, index) in coupons" 
                  :key="coupon.id"
                  class="coupon-item"
                  :class="{ 'selected': selectedCouponIndex === index, 'disabled': coupon.minOrderAmount && productTotalPrice < coupon.minOrderAmount }"
                  @click="() => { if (!(coupon.minOrderAmount && productTotalPrice < coupon.minOrderAmount)) selectCoupon(index); }"
                >
                  <div class="coupon-name">{{ coupon.name }}</div>
                  <div class="coupon-value">
                    {{ coupon.discount > 0 ? '¥' + coupon.discount : '无优惠' }}
                  </div>
                  <div v-if="coupon.minOrderAmount" class="coupon-condition">
                    满{{ coupon.minOrderAmount }}元可用
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 订单备注 -->
        <div class="checkout-section">
          <div class="section-header">
            <h2>订单备注</h2>
          </div>
          
          <div class="order-remark">
            <textarea 
              v-model="orderRemark" 
              placeholder="选填，请填写订单备注信息，如商品规格、配送要求等..."
              rows="3"
            ></textarea>
          </div>
        </div>
        
        <!-- 订单商品列表 -->
        <div class="checkout-section">
          <div class="section-header">
            <h2>订单商品</h2>
          </div>
          
          <div class="order-products">
            <div 
              v-for="item in cartItems" 
              :key="`${item.productId}-${item.color}-${item.size}`"
              class="order-product-item"
            >
              <div class="product-image">
                <img :src="item.image" :alt="item.productName" />
              </div>
              <div class="product-info">
                <h4 class="product-name">{{ item.productName }}</h4>
                <div class="product-options">
                  <span>颜色：{{ item.color }}</span>
                  <span>尺寸：{{ item.size }}</span>
                </div>
                <div class="product-price-quantity">
                  <span class="product-price">¥{{ item.price }}</span>
                  <span class="product-quantity">x{{ item.quantity }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 订单结算 -->
        <div class="order-summary">
          <div class="summary-item">
            <span>商品总价：</span>
            <span>¥{{ productTotalPrice.toFixed(2) }}</span>
          </div>
          <div class="summary-item">
            <span>运费：</span>
            <span>{{ shippingFee > 0 ? '¥' + shippingFee.toFixed(2) : '免运费' }}</span>
          </div>
          <div class="summary-item">
            <span>优惠券：</span>
            <span class="discount">-¥{{ couponDiscount.toFixed(2) }}</span>
          </div>
          <div class="summary-item total">
            <span>应付总额：</span>
            <span class="total-price">¥{{ totalAmount.toFixed(2) }}</span>
          </div>
        </div>
        
        <!-- 提交订单按钮 -->
        <div class="submit-order-section">
          <button class="back-button" @click="backToCart">返回购物车</button>
          <button class="submit-order-button" @click="submitOrder">
            提交订单
          </button>
        </div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="new-shop-footer">
      <div class="footer-bottom">
        <p>© 2024 NewShop. 保留所有权利。</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.new-shop-checkout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 导航栏样式 */
.new-shop-nav {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px 30px;
  display: flex;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #2196F3;
}

.nav-logo svg {
  margin-right: 10px;
}

/* 主要内容样式 */
.new-shop-checkout-main {
  flex: 1;
  padding: 30px;
}

.checkout-header {
  text-align: center;
  margin-bottom: 40px;
}

.checkout-header h1 {
  margin: 0 0 30px 0;
  font-size: 32px;
  color: #333;
}

.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.step-item.active .step-number {
  background-color: #2196F3;
  color: white;
}

.step-text {
  font-size: 14px;
  color: #666;
}

.step-item.active .step-text {
  color: #2196F3;
  font-weight: 600;
}

.step-divider {
  width: 60px;
  height: 2px;
  background-color: #e0e0e0;
}

.step-item.active + .step-divider {
  background-color: #2196F3;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  color: #f44336;
  font-size: 18px;
}

.retry-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  text-align: center;
}

.success-icon {
  margin-bottom: 20px;
}

.success-state h3 {
  margin: 0;
  font-size: 24px;
  color: #4caf50;
}

/* 结算内容区域 */
.checkout-content {
  max-width: 800px;
  margin: 0 auto;
}

.checkout-section {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.add-address-button {
  padding: 8px 20px;
  border: 1px solid #2196F3;
  background-color: white;
  color: #2196F3;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.add-address-button:hover {
  background-color: #2196F3;
  color: white;
}

/* 地址列表样式 */
.address-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.address-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #2196F3;
}

.address-item.selected {
  border-color: #2196F3;
  background-color: #E3F2FD;
}

.address-selector input[type="radio"] {
  margin-top: 5px;
}

.address-content {
  flex: 1;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.address-name {
  font-weight: 600;
  color: #333;
}

.address-phone {
  color: #666;
}

.default-tag {
  padding: 2px 8px;
  background-color: #2196F3;
  color: white;
  font-size: 12px;
  border-radius: 4px;
}

.address-detail {
  color: #666;
  line-height: 1.5;
}

/* 配送方式样式 */
.shipping-methods {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.shipping-method-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shipping-method-item:hover {
  border-color: #2196F3;
}

.shipping-method-item.selected {
  border-color: #2196F3;
  background-color: #E3F2FD;
}

.shipping-selector input[type="radio"] {
  margin-right: 15px;
}

.shipping-info {
  flex: 1;
}

.shipping-name {
  font-weight: 600;
  color: #333;
  margin-right: 20px;
}

.shipping-time {
  color: #666;
  font-size: 14px;
}

.shipping-fee {
  font-weight: 600;
  color: #333;
}

/* 支付方式样式 */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payment-method-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method-item:hover {
  border-color: #2196F3;
}

.payment-method-item.selected {
  border-color: #2196F3;
  background-color: #E3F2FD;
}

.payment-selector input[type="radio"] {
  margin-right: 15px;
}

.payment-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-icon {
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #666;
}

.payment-name {
  color: #333;
}

/* 优惠券样式 */
.coupon-selector {
  position: relative;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
}

.coupon-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon-discount {
  color: #f44336;
  font-weight: 600;
}

.coupon-dropdown {
  position: relative;
}

.coupon-button {
  background: none;
  border: none;
  color: #2196F3;
  font-weight: 600;
  cursor: pointer;
}

.coupon-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  display: none;
}

.coupon-selector:hover .coupon-dropdown-content {
  display: block;
}

.coupon-item {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon-item:last-child {
  border-bottom: none;
}

.coupon-item:hover {
  background-color: #f5f5f5;
}

.coupon-item.selected {
  background-color: #E3F2FD;
  color: #2196F3;
}

.coupon-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.coupon-item.disabled:hover {
  background-color: white;
}

.coupon-condition {
  font-size: 12px;
  color: #999;
}

/* 订单备注样式 */
.order-remark textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
}

.order-remark textarea:focus {
  outline: none;
  border-color: #2196F3;
}

/* 订单商品列表样式 */
.order-products {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-product-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.product-options {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.product-price-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-weight: 600;
  color: #2196F3;
}

.product-quantity {
  color: #666;
}

/* 订单汇总样式 */
.order-summary {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
}

.summary-item span:first-child {
  color: #666;
}

.summary-item span:last-child {
  color: #333;
  font-weight: 600;
}

.discount {
  color: #f44336 !important;
}

.summary-item.total {
  padding-top: 20px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

.total-price {
  font-size: 24px;
  color: #2196F3;
}

/* 提交订单按钮样式 */
.submit-order-section {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 60px;
}

.back-button {
  padding: 12px 30px;
  border: 1px solid #ddd;
  background-color: white;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.back-button:hover {
  border-color: #2196F3;
  color: #2196F3;
}

.submit-order-button {
  padding: 12px 60px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.submit-order-button:hover {
  background-color: #1976D2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.submit-order-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 页脚样式 */
.new-shop-footer {
  background-color: #333;
  color: white;
  padding: 30px;
  margin-top: auto;
}

.footer-bottom {
  text-align: center;
  font-size: 14px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .checkout-steps {
    flex-direction: column;
    gap: 10px;
  }
  
  .step-divider {
    width: 2px;
    height: 40px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .submit-order-section {
    flex-direction: column;
  }
  
  .back-button,
  .submit-order-button {
    width: 100%;
  }
}
</style>